<template>
  <div class="Me-contain">
    <div class="Me-contain-header">
      <div class="person">
        <div>
          <img
            src="../../public/Me-headimg.png"
            alt=""
            @click="goAccount"
            style="cursor: pointer"
          />
        </div>
        <div class="person-info">
          <span>{{ name }}</span>
          <span>{{ email }}</span>
          <span>欢迎来到OrangeShop</span>
        </div>
      </div>
      <div class="ticket">
        <div class="ticket-list">
          <div>红包0元</div>
          <div>优惠卷0张</div>
          <div>余额0元</div>
        </div>
        <div class="ticket-example">
          <div class="ticket-example-img">
            <img
              src="../../public/OrangeShopMineredBag.png"
              alt=""
              @click="goBag"
              style="cursor: pointer"
            />
            <div class="ticket-example-info">
              <div style="color: red">5元红包</div>
              <span style="color: red">{{ remainTime }}</span>
            </div>
          </div>
          <button style="color: #fff" @click="goOrangeShop">去使用</button>
        </div>
      </div>
    </div>
    <div class="Me-contain-order">
      &nbsp;&nbsp;&nbsp;我的订单
      <ul>
        <li>
          <div>0</div>
          <div>待付款</div>
        </li>
        <li>|</li>
        <li>
          <div>0</div>
          <div>待发货</div>
        </li>
        <li>|</li>
        <li>
          <div>1</div>
          <div>待收货</div>
        </li>
        <li>|</li>
        <li>
          <div>0</div>
          <div>待评价</div>
        </li>
        <li>|</li>
        <li>
          <div>1</div>
          <div>退款/售后</div>
        </li>
      </ul>
    </div>
    <OraLove />
  </div>
</template>

<script>
import OraLove from "@/components/OraLove.vue";
export default {
  data() {
    // 优先查找 localStorage，没有再查 sessionStorage
    let userInfo =
      localStorage.getItem("userInfo") || sessionStorage.getItem("userInfo");
    userInfo = userInfo ? JSON.parse(userInfo) : {};
    return {
      name: userInfo.username || "",
      email: userInfo.email || "",
      remainTime: "", // 新增：用于保存倒计时字符串
      timer: null, // 新增：保存定时器ID
    };
  },
  components: {
    OraLove,
  },
  methods: {
    updateCountTime() {
      const now = +new Date();
      const last = +new Date("2025-6-20 20:30:00");
      const count = (last - now) / 1000;
      let h = parseInt((count / 60 / 60) % 24);
      let m = parseInt((count / 60) % 60);
      let s = parseInt(count % 60);
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      this.remainTime = `${h}:${m}:${s}`;
    },
    goAccount() {
      this.$router.push("/mine/account");
    },
    goBag() {
      this.$router.push("/mine/mineBag");
    },
    goOrangeShop() {
      // 跳转到 orange 商城页面
      this.$router.push("/");
    },
  },
  mounted() {
    this.updateCountTime(); // 初始化
    this.timer = setInterval(this.updateCountTime, 1000); // 每秒更新
  },
  beforeDestroy() {
    clearInterval(this.timer); // 组件销毁时清除定时器
  },
};
</script>
<style scoped>
.Me-contain {
  width: 100%;
  margin: 30px;
}
.Me-contain .Me-contain-header {
  width: 100%;
  height: 152px;
  background-color: #fff7f3;
  border-radius: 12px;
  box-sizing: border-box;
}
.Me-contain .Me-contain-header .person {
  float: left;
  width: 45%;
  height: 100%;
  display: flex;
}
.Me-contain .Me-contain-header .person div {
  display: flex;
}
.Me-contain .Me-contain-header .person div img {
  width: 152px;
  border-radius: 50%;
}
.Me-contain .Me-contain-header .person .person-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.Me-contain .Me-contain-header .ticket {
  float: right;
  width: 25%;
  background: #fff;
  height: 120px;
  margin: 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}
.Me-contain .Me-contain-header .ticket .ticket-list {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 40px;
  line-height: 30px;
}
.Me-contain .Me-contain-header .ticket .ticket-example {
  background: #ffb188;
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 3px;
  border-radius: 5px;
  box-sizing: border-box;
}
.Me-contain .Me-contain-header .ticket .ticket-example .ticket-example-img {
  display: flex;
  align-items: center;
}
.Me-contain .Me-contain-header .ticket .ticket-example .ticket-example-info {
  display: flex;
  flex-direction: column;
}
.Me-contain .Me-contain-header .ticket .ticket-example img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.Me-contain .Me-contain-header .ticket .ticket-example button {
  background: red;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
}
.Me-contain .Me-contain-order {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  border-radius: 12px;
  margin-top: 20px;
  margin-bottom: 60px;
}
.Me-contain .Me-contain-order ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 40px;
}
.Me-contain .Me-contain-order ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Me-contain .Me-contain-order ul li:nth-child(2n-1):hover {
  cursor: pointer;
  color: #ffa500;
}
.Me-contain .Me-contain-goods {
  width: 100%;
  background: #ffb188;
  font-size: 20px;
  font-weight: bold;
  border-radius: 12px;
  margin-top: 20px;
}
.Me-contain .Me-contain-goods .list-container {
  box-sizing: border-box;
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  justify-content: space-around;
}
.Me-contain .Me-contain-goods .list-container .cart-contain {
  height: 100%;
  width: 17%;
  min-width: 185px;
  background: pink;
  margin: 10px;
  border-radius: 10px;
}
.Me-contain .Me-contain-goods .list-container .cart-contain img {
  width: 100%;
}
.Me-contain .Me-contain-goods .list-container .cart-contain span {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
}
.Me-contain .Me-contain-goods .list-container .cart-contain div {
  display: flex;
}
.Me-contain .Me-contain-goods .list-container .cart-contain div .price {
  color: #ff5000;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.Me-contain .Me-contain-goods .list-container .cart-contain div .population {
  font-size: 12px;
  color: #7a7a7a;
}
</style>